<template>
  <div class="permission" style="height: 100%">
    <div class="left">
      <je-collapse
        v-model:activeKey="activeKey"
        accordion
        expand-icon-position="right"
        :disable-empty-active="true"
        :flex-layout="true"
        @change="(e) => change(e)"
      >
        <je-collapse-panel key="1" header="菜单授权">
          <div class="content">
            <template v-if="topMenus.length > 0">
              <div
                v-for="item in topMenus"
                :key="item.JE_CORE_MENU_ID"
                class="item"
                :class="{ active: currentId === item.JE_CORE_MENU_ID }"
                @click="listItemClick(item.JE_CORE_MENU_ID, 'topMenu')"
              >
                <i :class="item.MENU_ICON"></i>&nbsp;&nbsp;&nbsp;{{ item.MENU_MENUNAME }}</div
              >
            </template>
            <je-loading v-if="memuLoading"></je-loading>
          </div>
        </je-collapse-panel>
        <je-collapse-panel
          v-if="routerPath != '/threeMemberManagement'"
          key="2"
          class="function"
          header="功能授权"
        >
          <div v-if="funcMenus" class="content">
            <div
              v-for="item in funcMenus"
              :key="item.IMPORTFUNC_FUNCINFO_ID"
              class="item"
              :class="{ active: currentId === item.IMPORTFUNC_FUNCINFO_ID }"
              @click="menuItemClick(item.IMPORTFUNC_FUNCINFO_ID, 'funcMenu')"
            >
              <i class="jeicon jeicon-function"></i>&nbsp;&nbsp;&nbsp;{{
                item.IMPORTFUNC_FUNCINFO_NAME
              }}</div
            >
          </div>
          <div class="bottom">
            <je-button type="text" @click="importEvent">导入</je-button>
            <je-button type="text" style="color: #b8741a" @click="remove">移除</je-button>
          </div>
        </je-collapse-panel>
      </je-collapse>
    </div>
    <div class="right">
      <div class="top">
        <je-toolbar space="0">
          <je-button type="text" :disabled="btnFlag" @click="save"
            ><i class="fal fa-save"></i><span>保存</span></je-button
          >
          <je-button type="text" :disabled="btnFlag" @click="unfold"
            ><i class="jeicon jeicon-an"></i><span>全部展开</span></je-button
          >
          <je-button type="text" :disabled="btnFlag" @click="packup"
            ><i class="jeicon jeicon-packup"></i><span>全部收起</span></je-button
          >
          <je-button type="text" :disabled="btnFlag" @click="refresh"
            ><i class="jeicon jeicon-refresh"></i><span>刷新数据</span></je-button
          >
        </je-toolbar>
      </div>
      <div class="dynamic-warp">
        <je-tree
          ref="treeview"
          class="table-treeView"
          :search="{ style: 'height:40px;' }"
          :tree-config="{
            trigger: 'cell-dblclick',
            rowField: 'id',
            parentField: 'parent',
            expandAll: true,
          }"
          :checkbox-config="{
            checkField: 'checked',
            checkStrictly: true,
            cascadeChild: true,
            cascadeParent: true,
          }"
          :loading="loading"
          size="mini"
          :data="treeData"
          multiple
          @cell-click="handlerSelect"
        >
          <template #nodeDefault="{ row }">
            <div class="recover" @mouseenter="isShowbtn = row.id" @mouseleave="isShowbtn = false">
              <span v-if="excludeFlags === true && row.bean.exclude !== true" class="self">
                {{ row.text }}
                &nbsp;&nbsp;&nbsp;<i
                  v-if="isShowbtn === row.id"
                  class="fal fa-calendar-times"
                  style="color: #a9aba9"
                ></i>
                <je-button
                  v-if="isShowbtn === row.id"
                  type="link"
                  class="btn"
                  @click.stop="recover(row)"
                  ><span>自主控制权限</span></je-button
                >
              </span>
              <span v-else-if="excludeFlags === true && row.bean.exclude === true" class="self">
                {{ row.text }}
                &nbsp;&nbsp;&nbsp;<i class="fal fa-calendar-times" style="color: #3265f5"></i>
                <je-button
                  v-if="isShowbtn === row.id"
                  type="link"
                  class="btn"
                  @click.stop="cancelRecover(row)"
                  ><span>取消自主控制权限</span></je-button
                >
              </span>
              <span v-else>{{ row.text }}</span>
            </div>
          </template>
        </je-tree>
      </div>

      <div class="dynamic-mask">
        <div v-if="borderFlag === 'longer'" class="word">
          <div class="dynamic-tip">
            自主控制权限说明：开启自主控制权限后，该权限项不受使用权限组的权限项控制，仅根据本角色自主勾选来控制权限项。取消自主控制权限后，则恢复使用权限组的权限项控制。
          </div>
        </div>
      </div>
      <div v-if="borderFlag === 'small'" class="short-mask"></div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';

  import { Toolbar, Button, Tree, Modal, Loading, Collapse } from '@jecloud/ui';

  import {
    cancelSelfControlPermByRoleApi,
    importFuncsApi,
    loadFuncPermissionTreeApi,
    loadimportFuncsApi,
    loadPermissionTreeApi,
    loadTopMenusApi,
    removeFuncsApi,
    saveDeptFuncPermissionApi,
    saveDeptMenuPermissionApi,
    saveDevelopFuncPermissionApi,
    saveDevelopMenuPermissionApi,
    saveOrgFuncPermissionApi,
    saveOrgMenuPermissionApi,
    savePermGroupFuncPermissionApi,
    savePermGroupMenuPermissionApi,
    saveRoleFuncPermissionApi,
    saveRoleMenuPermissionApi,
    selfControlPermByRoleApi,
  } from '@/api';

  // import _ from 'lodash';

  import { SelectWindow } from '@jecloud/func';

  import VueEvent from '@/helper/model/event';

  import { useJE } from '@common/helper/je';

  export default defineComponent({
    name: 'Permission',
    components: {
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeToolbar: Toolbar,
      JeButton: Button,
      JeTree: Tree,
      JeLoading: Loading,
    },
    props: {
      roleId: {
        type: String,
        default: '',
      },
      type: {
        type: String,
        default: '',
      },
      nodeType: {
        type: String,
        default: '',
      },
      excludeFlag: {
        type: Boolean,
        default: false,
      },
    },
    setup(props) {
      let { $router } = useJE();
      const routerPath = ref($router?.currentRoute.value.path || '/roleAuthority');
      watch(
        () => $router?.currentRoute.value,
        (val) => {
          routerPath.value = val.path;
        },
        {
          deep: true,
        },
      );
      const options = reactive({
        left: {
          size: 300,
          style: {
            height: '100%',
          },
        },
        // tabr样式
        tbar: {
          size: 40,
          style: {
            borderLeft: '1px solid #e9e9e9',
            borderTop: '1px solid #e9e9e9',
            borderBottom: '1px solid #e9e9e9',
          },
        },
        bottom: {
          size: 40,
        },
      });

      const treeData = ref([]); // tree的数据
      // eslint-disable-next-line no-unused-vars
      let treeMeta = null; // tree的对比项
      // 自主控制权限
      let excludeFlags = ref(false);
      const treeview = ref('treeview'); // tree的实例
      const loading = ref(false);
      // 获取权限数据
      let _currrntType = null; // 角色或者文件夹
      let _currrntId = null;
      // eslint-disable-next-line no-unused-vars
      let _curNodeType = null; // 角色，组织，机构，权限组，开发者
      onMounted(() => {
        initData();
        getMuneData();
        loadTopMenusEvent();
      });

      // 初始化数据
      const initData = () => {
        _currrntType = props.type;
        _currrntId = props.roleId;
        _curNodeType = props.nodeType;
        excludeFlags.value = props.excludeFlag;
        // 解锁按钮
        if (_currrntId) {
          btnFlag.value = false;
        }
      };
      // 对照组
      let dataMeta = [];
      // 请求权限数据
      const LoadPermissionTreeEvent = () => {
        // 如果没有id代码不再继续运行下去
        if (!currentId.value) return false;
        loading.value = true;
        // 获取权限数据tree
        loadPermissionTreeApi(
          {
            type: _currrntType,
            ids: _currrntId,
            topMenuId: currentId.value,
          },
          routerPath.value,
        )
          .then((res) => {
            treeData.value = res.children;
            treeMeta = JSON.parse(JSON.stringify(treeData.value)); // 保存tree对照组
            setTimeout(() => {
              dataMeta = treeview.value.getCheckboxRecords(true); // 得到所有已选的数据
              packup(); // 收起
              loading.value = false;
              const id = treeData.value[0]?.id;
              const row = treeview.value.getRowById(id);
              treeview.value.setTreeExpand(row, true); // 展开
            }, 130);
          })
          .catch(() => {
            loading.value = false;
          });
      };

      // 手风琴的显影项
      const activeKey = ref(['1']);
      let meta = 1;
      // 手风琴收缩，确保一个要展开
      const change = (e) => {
        if (!e) {
          if (meta == 1) {
            meta = 2;
          } else if (meta == 2) {
            meta = 1;
          }
          activeKey.value = meta;
        } else {
          meta = activeKey.value;
        }
      };

      // 获取menu数据
      const topMenus = ref([]); // 顶部菜单
      const funcMenus = ref([]); // 功能菜单
      let columnID = ref([]); // 去重id数组

      const btnFlag = ref(true); // 按钮置灰
      // 参数对象
      const memuLoading = ref(false);
      // 得到功能mune数据
      const getMuneData = () => {
        loadimportFuncsApi().then((res) => {
          funcMenus.value = res;
          columnID.value = []; // 用于过滤查询选择
          funcMenus.value.map((item) => {
            columnID.value?.push(item.IMPORTFUNC_FUNCINFO_ID);
          });
        });
      };
      // 得到菜单权限数据
      const loadTopMenusEvent = (roleId) => {
        memuLoading.value = true;
        topMenus.value = [];
        // { type: _curNodeType, ids: _currrntId }
        const ids = roleId || props.roleId;
        console.log(ids, props.roleId, roleId);
        loadTopMenusApi({ dev: _currrntType === 'develop' ? 1 : undefined, ids }, routerPath.value)
          .then((res) => {
            topMenus.value = res;
            memuLoading.value = false;
          })
          .catch(() => {
            memuLoading.value = false;
          });
      };

      // 功能授权项导入
      const importEvent = () => {
        SelectWindow.show({
          title: '权限导入',
          type: 'grid',
          // 过滤已有的是数据
          querys: [
            {
              code: 'JE_CORE_FUNCINFO_ID',
              value: columnID.value,
              type: 'notIn',
              cn: 'and',
            },
            { code: 'FUNCINFO_FUNCTYPE', value: ['FUNC', 'VIEW', 'TREE'], type: 'in', cn: 'and' },
          ],
          orders: [{ code: 'SY_CREATETIME', type: 'DESC' }],
          configInfo: 'JE_CORE_FUNCINFO,,,M',
          callback: function ({ rows }) {
            if (rows.length > 0) {
              let arr = [];
              rows.forEach((item) => {
                let obj = {};
                obj['id'] = item.JE_CORE_FUNCINFO_ID;
                obj['code'] = item.FUNCINFO_FUNCCODE;
                obj['name'] = item.FUNCINFO_FUNCNAME;
                arr.push(obj);
              });
              arr = JSON.stringify(arr);
              // 导入数据
              importFuncsApi({ strData: arr }).then((res) => {
                Modal.notice(res, 'success');
                // 更新数据
                getMuneData();
              });
            }
          },
        });
      };

      // collapse的哪一项
      let collapseName = null;
      // 功能权限点击事件
      let currentId = ref(null);
      // 点击工能授权项
      const menuItemClick = (id, item) => {
        currentId.value = id;
        collapseName = item;
        LoadFuncPermissionTreeEvent();
      };

      // 加载功能授权树事件
      const LoadFuncPermissionTreeEvent = () => {
        if (!_currrntType) return false;
        loading.value = true;
        loadFuncPermissionTreeApi({
          type: _currrntType,
          ids: _currrntId,
          funcCodes: currentId.value,
        })
          .then((res) => {
            treeData.value = res.children;
            treeMeta = JSON.parse(JSON.stringify(treeData.value));
            setTimeout(() => {
              dataMeta = treeview.value.getCheckboxRecords(true); // 得到已选择项
              const id = treeData.value[0]?.id;
              if (id) {
                const row = treeview.value.getRowById(id);
                treeview.value.setTreeExpand(row, true); // 展开所选项
              }
              loading.value = false;
            }, 130);
          })
          .catch(() => {
            loading.value = false;
          });
      };

      // 菜单授权点击事件
      const listItemClick = (id, item) => {
        currentId.value = id;
        collapseName = item;
        LoadPermissionTreeEvent();
      };

      // 功能项移除
      const remove = () => {
        if (collapseName === 'funcMenu') {
          Modal.confirm('您确定要移除吗？', () => {
            removeFuncsApi({
              funcIds: currentId.value,
              type: _currrntType,
              targetIds: _currrntId,
            }).then((res) => {
              Modal.notice(res, 'success');
              getMuneData();
              treeData.value = [];
              currentId.value = null;
              treeMeta = JSON.parse(JSON.stringify(treeData.value));
            });
          });
        } else {
          return Modal.alert('请选择需删除的功能!', 'error');
        }
      };

      // 维护的api数据
      const apiObj = {
        topMenu: {
          role: saveRoleMenuPermissionApi,
          department: saveDeptMenuPermissionApi,
          org: saveOrgMenuPermissionApi,
          permissionGroup: savePermGroupMenuPermissionApi,
          develop: saveDevelopMenuPermissionApi,
        },
        funcMenu: {
          role: saveRoleFuncPermissionApi,
          department: saveDeptFuncPermissionApi,
          org: saveOrgFuncPermissionApi,
          permissionGroup: savePermGroupFuncPermissionApi,
          develop: saveDevelopFuncPermissionApi,
        },
        code: {
          role: 'roleIds',
          department: 'deptIds',
          org: 'orgIds',
          permissionGroup: 'permGroupIds',
          develop: 'roleIds',
        },
      };
      // 保存
      const save = async () => {
        // 当前选择行数据
        const nowData = treeview.value.getCheckboxRecords(true);
        // check为true
        const addArr = nowData.filter((item) => {
          return !dataMeta.includes(item);
        });
        // 正常增加项
        const addArrNormal = addArr.filter((item) => {
          return item.bean.exclude !== true;
        });
        let addArrNormalData = [];
        getDataByData(addArrNormal, addArrNormalData);
        // 自主增加项
        const delArrExtend = addArr.filter((item) => {
          return item.bean.exclude === true;
        });
        let delArrExtendData = [];
        getDataByData(delArrExtend, delArrExtendData, 'self');

        // check为flase
        const delArr = dataMeta.filter((item) => {
          return !nowData.includes(item);
        });
        // 正常删除项
        const delArrNormal = delArr.filter((item) => {
          return item.bean.exclude !== true;
        });
        // 还是自主增加项
        const addArrExtend = delArr.filter((item) => {
          return item.bean.exclude === true;
        });
        let addArrExtendData = [];
        getDataByData(addArrExtend, addArrExtendData, 'selfDel');

        // 增加权限数据
        let addedStrData = [];
        addedStrData = addArrNormalData.concat(delArrExtendData).concat(addArrExtendData);
        addedStrData = JSON.stringify(addedStrData);

        // 移除权限数据
        let deletedStrData = [];
        getDataByData(delArrNormal, deletedStrData, 'del');
        deletedStrData = JSON.stringify(deletedStrData);

        // 当数据未改变时
        if (addArr.length === 0 && delArr.length === 0) return Modal.notice('数据未改变', 'info');

        // 发请求
        btnFlag.value = true;
        apiObj[collapseName][_currrntType](
          {
            [apiObj['code'][_currrntType]]: _currrntId,
            addedStrData,
            deletedStrData,
          },
          routerPath.value,
        )
          .then((res) => {
            Modal.notice(res, 'success');
            btnFlag.value = false;
            dataMeta = treeview.value.getCheckboxRecords(true);
          })
          .catch((err) => {
            Modal.alert(err.message, 'error');
            btnFlag.value = false;
          });
      };

      // 处理对比过后的数据
      const getDataByData = (data, target, method) => {
        data.find((item) => {
          const obj = {};
          let arr = [];
          // 根据nodeInfoType判断1.如果是'MT'或'subFunc'
          // del代表删除，self代表自主权限，self代表自主权限删除
          if (item.nodeInfoType === 'MT' || item.nodeInfoType === 'subFunc') {
            obj['id'] = item.id;
            obj['nodeInfoType'] = item.nodeInfoType;
            obj['nodeInfo'] = item.nodeInfo;
            if (method === 'del') {
              obj['permId'] = item.bean.PERM_ID;
            }
            if (method === 'self') {
              obj['checked'] = item.checked;
            }
            if (method === 'selfDel') {
              obj['checked'] = item.checked;
              obj['permId'] = item.bean.PERM_ID;
            }
            target.push(obj);
            // 2.如果是'button'
          } else if (item.nodeInfoType === 'button') {
            obj['id'] = item.id;
            obj['nodeInfoType'] = item.nodeInfoType;
            obj['funcCode'] = item.bean.FUNCINFO_FUNCCODE;
            if (method === 'del') {
              obj['permId'] = item.bean.PERM_ID;
            }
            if (method === 'self') {
              obj['checked'] = item.checked;
            }
            if (method === 'selfDel') {
              obj['checked'] = item.checked;
              obj['permId'] = item.bean.PERM_ID;
            }
            obj['nodeInfo'] = item.nodeInfo;
            target.push(obj);
            // 3.除'button'，'MT'或'subFunc'之外
          } else {
            obj['id'] = item.id;
            obj['nodeInfoType'] = item.nodeInfoType;
            obj['nodeInfo'] = item.nodeInfo;
            if (method !== 'del') {
              obj['buttons'] = arr;
              obj['permId'] = item.bean.PERM_ID;
            }
            if (method === 'self') {
              obj['checked'] = item.checked;
            }
            if (method === 'selfDel') {
              obj['checked'] = item.checked;
              obj['permId'] = item.bean.PERM_ID;
            }
            target.push(obj);
          }
        });
      };

      // 恢复继承按钮的显隐
      const isShowbtn = ref(null);
      // 是否开启多选框上下联动
      const handlerSelect = ({ row }) => {
        // 如果开启了自主权限，且当前项一勾选且是继承
        if (excludeFlags.value === true && row.checked === false && row.bean.extend === true) {
          row.checked = true;
          treeData.value = JSON.parse(JSON.stringify(treeMeta));
          return Modal.alert(
            '此权限项继承于权限组，无法取消勾选。若您需要控制此权限项，请点击自主控制权限后，再操作取消勾选！',
            'warning',
          );
        } /* else {
          if (treeview.value.isTreeExpandByRow(row)) {
            // 展开子节点
            expandParent(row);
          }
        } */
      };
      // 递归遍历得到展开项
      const expandParent = (row) => {
        if (row.children.length > 0) {
          treeview.value.setTreeExpand(row, true); // 展开
          row.children.find((item) => {
            expandParent(item, true);
          });
        }
      };
      // 自主控制权限
      const recover = (row) => {
        let type = null;
        let arr = [];
        arr.push(row);
        collapseName === 'topMenu' ? (type = 'menu') : (type = 'func');
        let myStrData = [];
        getDataByData(arr, myStrData, 'self');
        myStrData = JSON.stringify(myStrData);
        selfControlPermByRoleApi({ type, id: _currrntId, strData: myStrData }).then((res) => {
          Modal.notice(res, 'success');
          setTimeout(() => {
            refresh(true);
          }, 100);
        });
      };
      // 取消自主控制权限
      const cancelRecover = (row) => {
        let type = null;
        let arr = [];
        arr.push(row);
        collapseName === 'topMenu' ? (type = 'menu') : (type = 'func');
        let myStrData = [];
        getDataByData(arr, myStrData, 'self');
        myStrData = JSON.stringify(myStrData);
        // 取消自主权限控制
        cancelSelfControlPermByRoleApi({ type, id: _currrntId, strData: myStrData }).then((res) => {
          Modal.notice(res, 'success');
          setTimeout(() => {
            refresh(true); // 刷新
          }, 100);
        });
      };
      // 全部展开
      const unfold = () => {
        treeview.value.setAllTreeExpand(true);
      };
      // 全部收起
      const packup = () => {
        treeview.value.clearTreeExpand();
      };
      // 刷新
      const refresh = (flag) => {
        if (collapseName === 'topMenu') {
          loading.value = true;
          // 导入个人权限树接口
          loadPermissionTreeApi(
            {
              type: _currrntType,
              ids: _currrntId,
              topMenuId: currentId.value,
            },
            routerPath.value,
          )
            .then((res) => {
              treeData.value = res.children;
              treeMeta = JSON.parse(JSON.stringify(treeData.value));
              setTimeout(() => {
                // 更新数据
                dataMeta = treeview.value.getCheckboxRecords(true);
                if (!flag) {
                  packup();
                  const id = treeData.value[0].id;
                  const row = treeview.value.getRowById(id);
                  treeview.value.setTreeExpand(row, true);
                }
                loading.value = false;
              }, 130);
            })
            .catch(() => {
              loading.value = false;
            });
        } else if (collapseName === 'funcMenu') {
          if (!_currrntType) return false;
          loading.value = true;
          // 功能权限接口
          loadFuncPermissionTreeApi({
            type: _currrntType,
            ids: _currrntId,
            funcCodes: currentId.value,
          })
            .then((res) => {
              treeData.value = res.children;
              treeMeta = JSON.parse(JSON.stringify(treeData.value));
              setTimeout(() => {
                // 更新数据及细节处理
                dataMeta = treeview.value.getCheckboxRecords(true);
                const id = treeData.value[0].id;
                const row = treeview.value.getRowById(id);
                treeview.value.setTreeExpand(row, true);
                loading.value = false;
              }, 130);
            })
            .catch(() => {
              loading.value = false;
            });
        }
      };

      // 点击左侧tree的每一项的回调
      const showAccountEvent = ({ _type, _id, _nodeType }) => {
        _currrntType = _type;
        _currrntId = _id;
        _curNodeType = _nodeType;
        if (_nodeType) {
          btnFlag.value = false;
        } else {
          btnFlag.value = true;
        }
        loadTopMenusEvent(_id);
        getMuneData();
        refresh();
      };

      // 清除数据
      const cleanDataEvent = () => {
        _currrntType = null;
        btnFlag.value = true;
        treeData.value = [];
        currentId.value = null;
        treeMeta = JSON.parse(JSON.stringify(treeData.value));
        excludeFlags.value = false;
      };

      // 自主控制权限
      const borderFlag = ref('small');
      const excludeFlagEvent = (val, refersh) => {
        excludeFlags.value = val;
        // 修改bottom大小
        if (val) {
          borderFlag.value = 'longer';
        } else {
          borderFlag.value = 'small';
        }
        if (refersh) {
          refersh();
        }
        nextTick(() => {
          dynamic();
        });
      };

      // 动态设置warp高度
      const dynamic = () => {
        const tip = document.querySelector('.dynamic-tip');
        const warp = document.querySelector('.dynamic-warp');
        const short = document.querySelector('.short-mask');
        const mask = document.querySelector('.dynamic-mask');
        // 如果不是自主权限
        if (excludeFlags.value === false) {
          warp.style.paddingBottom = '20px';
          mask.style.height = '20px';
          mask.style.borderLeft = '1px solid #e9e9e9';
          // 如果自主权限已开
        } else {
          // 防空
          if (tip) {
            if (warp) {
              // 设置warp高度
              warp.style.paddingBottom = tip.offsetHeight + 18 + 'px';
            }
            if (short) {
              // 设置border
              short.style.borderLeft = '20px';
              short.style.borderLeft = '1px solid #e9e9e9';
            }
            if (mask) {
              // 设置mask
              mask.style.height = tip.offsetHeight + 18 + 'px';
              mask.style.borderLeft = '1px solid #e9e9e9';
            }
          }
        }
      };

      // 切换角色组织机构的回调事件
      const leftComponentCB = () => {
        topMenus.value = [];
        funcMenus.value = [];
        columnID.value = [];
        currentId.value = null;
      };

      VueEvent.on('showAccount', showAccountEvent);
      VueEvent.on('leftComponent', leftComponentCB);
      VueEvent.on('cleanData', cleanDataEvent);
      VueEvent.on('changeExclude', excludeFlagEvent);
      onUnmounted(() => {
        VueEvent.off('showAccount', showAccountEvent);
        VueEvent.off('leftComponent', leftComponentCB);
        VueEvent.off('cleanData', cleanDataEvent);
        VueEvent.off('changeExclude', excludeFlagEvent);
      });

      return {
        listItemClick,
        menuItemClick,
        currentId,
        topMenus,
        funcMenus,
        handlerSelect,
        options,
        activeKey,
        change,
        treeData,
        loading,
        save,
        recover,
        cancelRecover,
        unfold,
        packup,
        refresh,
        treeview,
        importEvent,
        remove,
        isShowbtn,
        btnFlag,
        excludeFlags,
        borderFlag,
        memuLoading,
        routerPath,
      };
    },
  });
</script>

<style lang="less" scoped>
  .permission {
    width: 100%;
    height: 100%;
    display: flex;
    .left {
      position: relative;
      width: 300px;
      min-width: 300px;
      height: 100%;
    }
    .right {
      position: relative;
      flex: 1;
      width: 100%;
      height: 100%;
      .top {
        position: absolute;
        width: 100%;
        height: 40px;
        border: 1px solid #e9e9e9;
        z-index: 12;
      }
      .short-mask {
        position: absolute;
        z-index: 11;
        border-left: 1px solid #e9e9e9;
        bottom: 0;
        width: 100%;
        height: 20px;
        background: #fff;
      }
      .dynamic-mask {
        position: absolute;
        z-index: 11;
        border-left: 1px solid #e9e9e9;
        bottom: 0;
        width: 100%;
        background: #fff;
        .word {
          width: 100%;
          padding: 0 10px;
          position: absolute;
          z-index: 9;
          bottom: 10px;
        }
        .dynamic-tip {
          line-height: 25px;
          padding: 5px 10px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          display: -moz-box;
          -moz-line-clamp: 3;
          -moz-box-orient: vertical;
          overflow-wrap: break-word;
          word-break: break-all;
          white-space: normal;
          overflow: hidden;
          border: 1px solid #abd09d;
          background: #eff9f2;
          color: #36761f;
          // height: 60px;
          width: 100%;
        }
      }
      .dynamic-warp {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        padding-top: 40px;
        padding-bottom: 20px;
      }
    }
    :deep(.je-panel-wrapper) {
      height: 100% !important;
      width: 100% !important;
    }
    :deep(.je-panel-item-region-default) {
      top: 40px !important;
      height: 92% !important;
      width: 100% !important;
    }
    .self {
      width: 100%;
    }
    .recover {
      width: 100%;
      :deep(.ant-btn-link) {
        padding: 0 6px;
        color: #a9a9a9 !important;
        &:hover {
          color: #3265f5 !important;
        }
      }
    }
    .active {
      background: @primary-2;
      color: @primary-color !important;
    }
    .content {
      height: 100%;
      // overflow: auto;
      min-height: 560px;
      position: relative;
      .item {
        width: 100%;
        padding-left: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        text-align: LEFT;
        color: #333333;
        line-height: 30px;
      }
      .item:hover {
        cursor: pointer;
      }
    }
    .content {
      p:hover {
        cursor: pointer;
      }
    }
    .is--folder {
      color: #ffb04a;
    }
    :deep(.table-treeView .je-panel-wrapper) {
      border-left: 1px solid #e9e9e9;
    }
    .function {
      position: relative;
      .bottom {
        position: absolute;
        bottom: 10px;
        right: 10px;
      }
    }
    :deep(.ant-collapse-content-box) {
      background: #ffffff;
    }
    :deep(.ant-collapse) {
      border-left: none;
      border-right: none;
      height: 100%;
    }
    :deep(.ant-collapse-content-box) {
      padding: 0;
    }
    :deep(.je-collapse.je-collapse-flex .ant-collapse-item.ant-collapse-item-active) {
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    :deep(.ant-collapse-item-active .ant-collapse-header) {
      line-height: 28px;
      height: 38.5px;
      padding: 5px 16px;
      background: #f7f9fc;
    }
    :deep(.ant-collapse-header) {
      line-height: 28px;
      height: 38px;
      padding: 5px 16px;
      background: #f7f9fc;
    }
    :deep(.ant-collapse-content-box) {
      height: 100%;
    }
    :deep(.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header) {
      line-height: 30px;
      height: 39px;
      padding: 5px 16px;
      background: #f7f9fc;
    }
    :deep(.ant-collapse.ant-collapse-icon-position-right) {
      border-radius: 0;
    }
    :deep(.table-treeView .je-tree-search-wrapper > *) {
      height: 40px;
      border-top: none;
      border-left: none;
    }
    :deep(.ant-input-affix-wrapper.ant-select-selection-search-input) {
      border-top: 1px solid #ffffff;
      border-left: 1px solid #ffffff;
      &:hover {
        border-top: 1px solid #5c8dff;
        border-left: 1px solid #5c8dff;
      }
    }
    :deep(.ant-input-affix-wrapper-focused.ant-select-selection-search-input) {
      border: 1px solid #5c8dff;
    }
  }
</style>
